<template>
	<view class="body">
<!-- 
			<button type="default" plain="true" open-type="share" class="share-btn" data-name="video">
			拍摄
		</button> -->
		<!-- <button class="custom-share-button" open-type="share" data-channel="video" data-qrcode="inv34+23==">Click Me!</button> -->
		<scroll-view>
			<u-modal v-model="pop_show" :content="content" :mask-close-able="true" show-cancel-button='true' @confirm='playad'></u-modal>

			<u-toast ref="uToast" />
			<!-- 顶部栏 -->
			<view class="topbar">
				<view class="_img">
					<u-image width="100rpx" height="100rpx" :src='user.avatar' shape='circle'></u-image>

				</view>
				<view class="text">
					<text>
						你好 {{user.realName}}
					</text>

				</view>
				<!-- 全国查询同名 -->
				<view class="wholeCountry">
					<text class="whole-text">全国有{{National}}人跟你同名</text>

					<view style="width: 90%;margin-top: 50rpx;">
						<uni-list>

							<uni-list-item v-for=" i in tp_data">
								<view class="whole-data">{{i.name}}&nbsp&nbsp&nbsp{{i.num}}
									<view class="whole-line">
										<u-line-progress :show-percent="false" active-color="#98C1FF" :percent="i.num" height="18"></u-line-progress>
									</view>
								</view>
							</uni-list-item>
						</uni-list>
						<view class="whole-Third-party">
							<text>数据由地方政务系统查询所得，</text>
							<view>更多地区正在开发对接中...</view>
						</view>
					</view>


				</view>
			</view>
			<!-- 内容区域 -->
			<view class="content">

				<view class="included">在同样的TA&nbsp&nbsp我们收录了</view>
				<!-- 比例分布 -->
				<view class="content-data">
					<!-- 同名同生日两按钮 -->
					<view class="content-btn-view">
						<u-button shape="circle" size="medium" :custom-style="tongmingbtn" @click="Queryname" v-if="status_one">{{n_num}}人跟你同名</u-button>
						<u-button hair-line=false shape="circle" size="medium" :custom-style="tongshengribtn" @click="Querybirthday()"
						 v-if="status_one">{{b_num}}人跟你同生日</u-button>
						<u-button shape="circle" size="medium" :custom-style="tongmingbtntwo" @click="Queryname" v-if="status_two">{{n_num}}人跟你同名</u-button>
						<u-button hair-line=false shape="circle" size="medium" :custom-style="tongshengribtntwo" @click="Querybirthday()"
						 v-if="status_two">{{b_num}}人跟你同生日</u-button>
					</view>
					<view class="" v-if="no_data==true">
						<!-- 未查询到数据显示出该页面 -->
						<view class="no—data">
							<image src="../../static/no_data.png" mode="" class="no-data-img"></image>
							<view class="share">
								<button type="default" plain="true" open-type="share" class="share-btn" data-name="share">
									分享
								</button>

							</view>
						</view>


					</view>
					<view class="proportion" v-if="no_data==false">
						<!-- 比例分布内容 -->
						<view>
							<text class="proportion-sex-text">男女比例</text>

							<view class="qiun-charts">
								<canvas canvas-id="canvasPie" id="canvasPie" class="charts"></canvas>
							</view>

							<view class="bili">
								<view class="bili-man">
									男:&nbsp&nbsp{{man_data}}
								</view>
								<view class="bili-woman">
									女:&nbsp&nbsp{{woman_data}}
								</view>

							</view>
							<!-- 分割线 -->
							<view class="dividingLine" v-if='birthday'></view>
						</view>
						<!-- 年龄段分布 -->
						<view class="ageDistribution" v-if="birthday">
							<text class="age-text">年龄段分布</text>
							<view class="qiun-columns">
								<view class="qiun-charts">
									<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" ref="column"></canvas>
								</view>
							</view>
						</view>
						<view class="dividingLine" style="margin-top: 15%;"></view>
						<!-- 地区分布 -->
						<view class="qiun-columns">
							<text class="columns-text">地区分布</text>
							<view class="qiun-charts" style="position: relative;bottom: 40rpx;">
								<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"></canvas>
							</view>
						</view>
						<u-button size="medium" :custom-style="seebtn" @click="lookare" shape="circle">看看他们是谁</u-button>
					</view>
				</view>
				<!-- 中间文字 -->
				<view class="middle-text">
					<u-avatar class="u-ava" src="/static/samename.png" mode="circle" size=158></u-avatar>
					<view class="m-text">
						<view>如果世界上有一个</view>
						<view>跟你同名同姓同年同月同日的人</view>
						<view>我希望他出现在这里</view>
					</view>

				</view>
				<view class="content-box">
					<uni-list v-for="(i,index) in same_data ">
						<uni-list-item style="margin-bottom: 10rpx; margin-right: 10rpx;">
							<view class="content">
								<u-avatar :src="i.avatar" size="120" class="avatar"></u-avatar>
								<view class="information">
									<view class="name">姓名:<text class="name-text">{{i.realName}}</text></view>
									<view class="sex">性别:<text class="sex-text">{{i.sex}}</text></view>
									<view class="area">地区:<text class="area-text">{{i.area}}</text> </view>
									<view class="qianming">个性签名:&nbsp&nbsp&nbsp嘤嘤嘤</view>
								</view>
								<u-button :custom-style="same_btn" @click="JumpCenter(same_data[index])" size="medium">去TA抖音看看</u-button>
							</view>

						</uni-list-item>

					</uni-list>
				</view>
				<!--  帮朋友亲人查询-->
				<view>
					<view class="friend-inquiry">
						<view style="margin-left: 50rpx;margin-top: 30rpx;">
							<u-button size="medium" @click="QueryFname" :custom-style="friend_inquiry_name_btn" v-if='f_name_btn_one' shape="circle">查名字</u-button>
							<u-button size="medium" @click="QueryFbirthday" :custom-style="friend_inquiry_bday_btn" v-if='f_name_btn_one'
							 shape="circle">查生日</u-button>
							<u-button size="medium" @click="QueryFname" :custom-style="friend_inquiry_name_btn_two" v-if="f_name_btn_two"
							 shape="circle"> 查名字</u-button>
							<u-button size="medium" @click="QueryFbirthday" :custom-style="friend_inquiry_bday_btn_two" v-if="f_name_btn_two"
							 shape="circle">查生日</u-button>
						</view>
						<view class="query-box">
							<view class="EnterName" v-if="f_name_query">
								<view class="lookup">帮亲人朋友查一查</view>
								<view style="width: 500rpx; margin: auto;">
									<u-input :custom-style="lookupinput" v-model="f_name" type="text" placeholder='输入名字' />
								</view>

								<u-button size="mini" :custom-style="lookupbtn" @click="handcqn">查名字</u-button>

							</view>
							<view class="EnterName" v-if="f_birthday_query">
								<view class="lookup">帮亲人朋友查一查</view>
								<view style="width: 500rpx; margin: auto;margin-top: 40rpx;">
									<view class="birth-input">
										<view class="uni-list">
											<view class="uni-list-cell">

												<view class="uni-list-cell-db">
													<picker mode="date" :value="f_birthday" :start="startDate" :end="endDate" @change="bindDateChange">
														<view class="uni-input" style="margin-top: 20rpx;">{{f_birthday}}</view>
													</picker>
												</view>
											</view>
										</view>
									</view>
									<u-button size="mini" :custom-style="blookupbtn" @click="handcqb">查生日</u-button>
									<view style="margin-left: 60rpx;">
										<view style="position: relative;top: 30rpx;">此查询，仅能查询到本平台已经</view>
										<view style="position: relative;top: 30rpx;">收录的日期对应的同生日的用户</view>
									</view>

								</view>
							</view>

						</view>
					</view>

				</view>


			</view>
		</scroll-view>


	</view>
</template>


<script>
	import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaPie = null;
	var canvaColumn = null;
	var canvaLineA = null;

	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})

			return {
				no_data: false,
				f_name_btn_one: true,
				f_name_btn_two: false,
				man_data: 0,
				woman_data: 0,
				status_two: true,
				status_one: false,
				title: 'picker',
				f_birthday: currentDate,
				content: '观看广告，查看他的个人中心',
				u_params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
				},
				n_num: 0,
				same_data: '',
				pop_show: false,
				sameNameBirthday_data: '',
				f_National: 0,
				province_data: '',
				sameNameBirthday: false,
				name: '',
				b_show: false,
				National: 0,
				cWidth: '',

				fb: true,
				user: {
					realName: '',
					avatar: '',
				},
				f_num: '',
				b_num: 0,
				fn_data: [],
				friend_name: '',
				f_birthday_statu: false,
				cHeight: '',
				birthday: true,
				f_birthday_query: false,
				f_name_query: true,
				f_name: '',
				pixelRatio: 1,
				serverData: '',
				tp_data: [],
				LineA: {
					categories: ['广西', '湖南', '广东', '北京', '上海', '河南', '地区'],
					series: [{
						name: '数量',
						data: [100, 80, 95, 150, 112, 132],
						color: '#98C1FF'
					}, ]
				},
				"Column": {
					"categories": ["2012", "2013", "2014", "2015", "2016", "2017", '年龄'],
					"series": [{
						"name": "数量",
						"color": "#98C1FF",
						"data": [15, 20, 45, 37, 43, 34]
					}, ]
				},
				series: [{
					"name": "男",
					'color': '#408CFF',
					"data": 500
				}, {
					"name": "女",
					"data": 30,
					'color': '#F55A49',
				}, ],
				f_LineA: {},

				f_Column: {

				},
				f_series: {},

				bdinput: {

					'background-color': '#98C1FF',
				},

				same_btn: {
					'padding': '20rpx 0  14rpx 0',
					'width': ' 230rpx',
					'height': '70rpx',
					'background-color': '#98C1FF',
					'font-size': ' 28rpx',
					'text-align': 'left',
					'color': '#FFFFFF',
					'margin-left': '60%'
				},
				middlebtn: {
					'z-index': '100',
					'position': 'relative',
					'left': '255rpx',
					'top': '-145rpx',
					'color': '#FFFFFF',
					'width': '196rpx',
					'background-color': '#98C1FF'
				},
				tongmingbtn: {
					'z-index': '100',
					'position': 'relative',
					'left': '55rpx',
					'color': '#FFFFFF',
					'width': '45%',
					'background-color': '#98C1FF'
				},
				tongmingbtntwo: {
					'z-index': '100',
					'position': 'relative',
					'left': '55rpx',
					'width': '45%',
					'background-color': '#E4E4E4FF',
				},
				tongshengribtn: {

					'border-color': '#E4E4E4FF',
					'padding': '0 0 0 20rpx',
					'width': '45%',
					'background-color': '#E4E4E4FF',

				},
				tongshengribtntwo: {
					'color': '#FFFFFF',
					'border-color': '#98C1FF',
					'padding': '0 0 0 20rpx',
					'width': '45%',
					'background-color': '#98C1FF',

				},
				seebtn: {
					'width': '460rpx',
					'height': '80rpx',
					'background-color': '#8BBAFF',
					'margin-top': '10%',
					'margin-bottom': '16%',
					'margin-left': '18%',
					'color': '#FFFFFF',
				},
				lookupinput: {
					'width': '460rpx',
					' text-align': 'center',
					'height': '85rpx',
					'background': '#F8F8F8',
					'border': '1px solid #707070',
					'opacity': '1',
					'border-radius': '16rpx',
					'position': 'relative',
					'top': '70rpx',
				},
				blookupbtn: {
					'width': '220rpx',
					'height': '70rpx',
					'background': '#98C1FF',
					'box-shadow': '0px 3rpx 6rpx rgba(0, 0, 0, 0.16)',
					'opacity': '1',
					'border-radius': ' 16rpx',
					'position': 'relative',
					'left': '33%',
					'top': '20rpx',
					'color': '#FFFFFF',
				},
				lookupbtn: {
					'width': '220rpx',
					'height': '70rpx',
					'background': '#98C1FF',
					'box-shadow': '0px 3rpx 6rpx rgba(0, 0, 0, 0.16)',
					'opacity': '1',
					'border-radius': ' 16rpx',
					'position': 'relative',
					'left': '37%',
					'top': '80rpx',
					'color': '#FFFFFF',
				},
				friend_inquiry_name_btn: {
					'width': '50%',
					'height': '70rpx',
					'font-size': '28rpx',
					'position': 'relative',
					'left': '15rpx',
					'color': '#FFFFFF',
					'background-color': '#98C1FF',
				},

				friend_inquiry_name_btn_two: {
					'width': '50%',
					'height': '70rpx',
					'font-size': '28rpx',
					'position': 'relative',
					'left': '15rpx',
					'background-color': '#E4E4E4FF',

				},

				friend_inquiry_bday_btn: {
					'width': '50%',
					'height': '70rpx',
					'font-size': '28rpx',
					'position': 'relative',
					'left': '-55rpx',

					'background-color': '#E4E4E4FF',
				},

				friend_inquiry_bday_btn_two: {
					'width': '50%',
					'height': '70rpx',
					'position': 'relative',
					'left': '-55rpx',
					'font-size': '28rpx',
					'color': '#FFFFFF',
					'background-color': ' #98C1FF',

				},

			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onShareAppMessage(shareOption) {
			return {
				title: '快来康康同样的TA',
				desc: '这是默认的转发文案，用户可以直接发送，也可以在发布器内修改',
				path: '/page/login/index', // ?后面的参数会在转发页面打开时传入onLoad方法
			
				templateId: 'xmqi3vul2929i5gn3b',
				success() {
					console.log('转发发布器已调起，并不意味着用户转发成功，微头条不提供这个时机的回调');
				},
				fail() {
					console.log('转发发布器调起失败');
				}
			}
			// console.log(shareOption.channel)
			// switch (shareOption.channel) {
			// 	case 'video':
			// 	console.log(123)
			// 		return {
			// 			extra: {
			// 				// 注意，只有小程序使用button组件触发分享时，会有target属性
			// 				videoPath: shareOption.target.dataset.path
			// 			}
			// 		};
			// 	case 'qrcode':
			// 		console.log(12)
			// 		break;
			// 	default:
			// 		console.log(123)
			// 		break;
			// }
		},
		onShow() {

			this.Querybirthday();
			this.query_bd();
			this.getinfo();
			this.getsameNameQuery();
			this.getSamebirthdayname();

		},
		onLoad() {
			const app = getApp()
			app.globalData.currentPage = this
			_self = this;
			this.cWidth = uni.upx2px(650);
			this.cHeight = uni.upx2px(500);

		},
		created() {

			this.name = uni.getStorageSync('name', );
			//当组件创建的时候调用生成饼图的方法
			this.Queryname();
			this.getprovince_data();
		},

		methods: {
			//点击朋友姓名查询
			handcqn() {
				if (this.f_name == '') {
					this.$refs.uToast.show({
						title: '查询参数不能为空！',
						type: 'error',

					})
				} else {
					uni.setStorageSync('query_name', this.f_name)
					uni.navigateTo({
						url: '../name_query/name_query'
					});
				}

			},
			//用户观看完广告
			closeAdFunction() {
				this.pop_show = false
				uni.navigateTo({
					url: '../OthersCenter/OthersCenter',
				})
			},
			//用户取消广告
			cancelAdFunction() {
				this.pop_show = false
				console.log('播放中途退出，不下发游戏奖励1')
			},
			//播放广告
			playad() {
				const app = getApp()
				app.globalData.playAd()
			},

			//进入同名同姓人主页
			JumpCenter(data) {
				if (typeof this.user.qrCode == "undefined" || this.user.qrCode == null || this.user.qrCode == "") {
					this.$refs.uToast.show({
						title: '请先上传抖音二维码！',
						type: 'error',

					})
					return;
				}

				this.pop_show = true
				uni.setStorageSync('data', data);

			},
			//获取同名同姓同生日数据
			getSamebirthdayname() {
				var birthTime = uni.getStorageSync('birthTime');
				var data = {
					'name': this.name,
					'birthDay': uni.getStorageSync('birthTime'),
					'queryType': 'all',
				}
				this.$u.post('system/user/profile/queryDetailInfo', data).then(res => {
					console.log(res, 'kkjkj')
					if (res.data.length < 1) {
						this.sameNameBirthday = true

					} else {
						this.sameNameBirthday = false
						this.same_data = res.data
						for (let i = 0; i < this.same_data.length; i++) {

							if (this.same_data[i].sex === '0') {
								this.same_data[i].sex = "男"
							} else if (this.same_data[i].sex === '1') {
								this.same_data[i].sex = "女"
							} else {
								this.same_data[i].sex = "保密"
							}

						}
					}
				})
			},
			//获取有效省份数据
			getprovince_data() {
				this.$u.get('api/sameNameQueryEffectiveArea', ).then(res => {

					this.province_data = res.data
					this.getsameNameQuery()
				})
			},

			//获取全国重名数据
			getsameNameQuery() {
				this.tp_data = [],
					this.National = 0
				for (let i = 0; i < this.province_data.length; i++) {

					let data = {
						'name': this.name,
						'areaName': this.province_data[i],
					}

					this.$u.post('api/sameNameQueryByArea', data).then(res => {

						if (this.tp_data.hasOwnProperty(this.province_data[i])) {

						} else {
							this.tp_data.push(res.data[0])
							this.National = Number(res.data[0].num) + this.National
						}



					})
				}
				console.log(this.tp_data)

			},
			//获取帮朋友查询的全国重名数据
			getfsameName(name) {
				this.fn_data = [],
					this.f_National = 0

				for (let i = 0; i < this.province_data.length; i++) {
					let data = {
						'name': name,
						'areaName': this.province_data[i],
					}

					this.$u.post('api/sameNameQueryByArea', data).then(res => {

						this.fn_data.push(res.data[0])
						if (res.data[0] != []) {
							this.f_National = Number(res.data[0].num) + this.f_National
						}




					})

				}

			},

			//跳转同名同姓页
			lookare() {
				uni.navigateTo({
					url: '../same_name/same_name'
				});


			},


			//点击朋友生日查询
			handcqb() {
				if (this.f_birthday == '') {
					this.$refs.uToast.show({
						title: '查询参数不能为空！',
						type: 'error',

					})
				} else {
					uni.setStorageSync('query_bday', this.f_birthday);
					uni.navigateTo({
						url: '../bday_query/bday_query'
					});
				}
			},

			//点击查名字
			QueryFname() {
				this.f_name_btn_one = true
				this.f_name_btn_two = false
				this.f_name_query = true;
				this.f_birthday_query = false;
				this.check_da = false;
			},
			//点击查生日
			QueryFbirthday() {
				this.f_name_btn_one = false
				this.f_name_btn_two = true
				this.f_name_query = false;
				this.f_birthday_query = true;
				this.check_da = false;
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//获取选择日期
			bindDateChange(e) {
				this.f_birthday = e.target.value
			},
			//点击同生日
			Querybirthday() {
				this.status_one = false
				this.status_two = true
				var birthTime = uni.getStorageSync('birthTime');
				this.$u.post('/system/user/profile/query', {
					'birthDay': birthTime,
					'queryType': 'tsrcx',
				}, ).then(res => {

					this.birthday = false;
					this.LineA = res.data.LineA;
					this.series = res.data.Pie.series;
					this.man_data = this.series[0].data
					this.woman_data = this.series[1].data
					this.b_num = this.series[0].data + this.series[1].data

					if (this.b_num > 0) {

						this.no_data = false
					} else {
						this.no_data = true
					}
					this.showPie("canvasPie", this.series, this.b_num);
					this.showLineA("canvasLineA", this.LineA)


				})
			},

			//点击同名
			Queryname() {
				this.status_one = true
				this.status_two = false
				this.birthday = true;
				var name = uni.getStorageSync('name');
				this.$u.post('/system/user/profile/query', {
					'name': name,
					'queryType': 'cmcx',
				}, ).then(res => {
					this.Column = res.data.Column;
					this.LineA = res.data.LineA;
					this.series = res.data.Pie.series
					this.n_num = this.series[0].data + this.series[1].data
					if (this.n_num > 0) {
						this.no_data = false
					} else {
						this.no_data = true
					}
					this.man_data = this.series[0].data
					this.woman_data = this.series[1].data
					this.showPie("canvasPie", this.series, this.n_num);
					this.showColumn("canvasColumn", this.Column)
					this.showLineA("canvasLineA", this.LineA)


				})
			},
			getinfo() {
				//获取个人信息
				const authorization = uni.getStorageSync('authorization');
				this.$u.get('/system/user/profile', {}, {
					'authorization': authorization
				}).then(res => {
					this.user = res.data

				})
			},
			//获取同生日数据

			query_bd() {
				this.name = uni.getStorageSync('name');
				this.$u.post('/system/user/profile/query', {
					'birthDay': '2014-11-04',
					'queryType': 'tsrcx',


				}, ).then(res => {
					this.LineA = res.data.LineA;
					this.series = res.data.Pie.series;
					this.man_data = this.series[0].data
					this.woman_data = this.series[1].data


				})
			},
			//生成圆饼图
			showPie(canvasId, series, num) {
				new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					legend: true,
					title: {
						name: num,
						color: '#7cb5ec',
						fontSize: 25,
						offsetY: 0,
					},
					subtitle: {

						color: '#666666',
						fontSize: 15,
						offsetY: 30,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 57,
							labelWidth: 15
						},

					},

					background: '#FFFFFF',
					pixelRatio: 1,
					series: series,
					animation: true,
					width: this.cWidth,
					height: this.cHeight,
					disablePieStroke: true,
					dataLabel: false,
				})
			},
			//生成柱状图
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({

					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: true
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: 15,
						},
					}
				});

			},

			//生成区域图
			showLineA(canvasId, chartData) {
				var canvaArea = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'area',
					fontSize: 11,
					legend: {
						show: true
					},
					dataLabel: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: 1,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						disableGrid: true,
						type: 'grid',
						gridColor: '#CCCCCC',
						gridType: 'dash',
						dashLength: 8
					},
					yAxis: {
						disabled: true,
						disableGrid: true,
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						splitNumber: 5,
						min: 10,
						max: 180,
					},
					width: this.cWidth,
					height: this.cHeight,
					extra: {
						enableMarkLine: true,
						markLine: {
							type: 'solid',


						},
						area: {
							type: 'straight',
							opacity: 0.2,
							addLine: true,
							width: 1
						}
					}
				});

			},


		}
	}
</script>

<style lang="scss" scoped>
	.no—data {


		background: #FFFFFF;

		opacity: 1;


		.no-data-img {

			width: 752rpx;
			height: 817rpx;
		}

		.share {


			width: 100%;
			background: #FFFFFF;

			opacity: 1;

			height: 200rpx;

			.share-btn {

				outline: 0;
				color: #FFFFFF;
				margin-top: 12rpx;
				width: 453rpx;
				height: 80rpx;
				background: #98C1FF;
				box-shadow: 0rpx 3rpx 6rpx rgba(0, 0, 0, 0.16);
				opacity: 1;
				border-radius: 38rpx;
			}
		}

	}

	.birth-input {
		text-align: center;
		position: relative;
		top: 27rpx;
		margin: auto;
		padding: 0 0 0 20rpx;
		width: 230px;
		height: 35px;
		background: #FFFFFF;
		border: 0.5px solid #707070;
		border-radius: 5px;
		margin-bottom: 20rpx;
		opacity: 0.8;
	}

	.content-box {
		margin-right: 30rpx;
		padding: 0rpx 14rpx 0 14rpx;
		background-color: #F0F0F0;

		.content {
			overflow: hidden;
			width: 722rpx;
			height: 366rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 6rpx rgba(78, 78, 78, 0.12);
			opacity: 1;
			border-radius: 16rpx;

			.avatar {
				position: relative;
				left: 29rpx;
				top: 24rpx;
			}




			.information {
				position: relative;
				left: 27%;
				bottom: 27%;

				.name {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #707070;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
					opacity: 1;

					.name-text {
						margin-left: 20rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						color: #010101;
						-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
						text-stroke: 1 rgba(0, 0, 0, 0);
						opacity: 1;
					}
				}

				.sex {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #707070;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
					opacity: 1;
					position: relative;
					left: 34%;
					bottom: 39rpx;

					.sex-text {
						margin-left: 20rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						color: #010101;
						-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
						text-stroke: 1 rgba(0, 0, 0, 0);
						opacity: 1;
					}
				}

				.area {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #707070;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
					opacity: 1;

					.area-text {
						margin-left: 20rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						color: #010101;
						-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
						text-stroke: 1 rgba(0, 0, 0, 0);
						opacity: 1;
					}
				}

				.qianming {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #707070;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
					opacity: 1;
					position: relative;
					top: 50rpx;
					right: 15%;

				}

			}



		}
	}

	.body {
		.dividingLine {
			margin: auto;
			position: relative;
			bottom: 10rpx;
			width: 500rpx;
			height: 1rpx;
			background: #D7D7D7;
			opacity: 1;

		}


		padding: 0 14rpx 0 14rpx;
		background-color: #F9F9F9;
		font-family: PingFang SC;

		.middle-text {
			padding: 59rpx 0 0 0;
			margin-top: 18rpx;
			width: 722rpx;
			height: 317rpx;
			background: #FFFFFF;
			box-shadow: 0px 6rpx 12rpx rgba(78, 78, 78, 0.12);
			opacity: 1;
			border-radius: 14rpx;

			.u-ava {


				margin-left: 59rpx;
			}

			.m-text {
				margin-left: 32rpx;
				font-size: 29rpx;
				font-weight: 400;
				line-height: 42rpx;
				color: #010101;
				-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
				text-stroke: 1 rgba(0, 0, 0, 0);
				letter-spacing: 7rpx;
				opacity: 1;
				position: relative;
				left: 30%;
				bottom: 160rpx;
			}

		}

		.topbar {
			width: 722rpx;
			height: auto;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx rgba(78, 78, 78, 0.14);
			opacity: 1;
			border-radius: 0rpx 0rpx 14rpx 14rpx;

			.whole-Third-party {
				position: fixed;
				left: 400rpx;
				position: relative;
				bottom: 20rpx;
				color: #919191;
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
				
				-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
				text-stroke: 1 rgba(0, 0, 0, 0);
				opacity: 1;
			}

			._img {
				margin-left: 25rpx;
				position: relative;
				top: 25rpx;
			}

			.text {
				position: relative;
				left: 153rpx;
				bottom: 50rpx;
				font-size: 38rpx;
				font-weight: bold;
				line-height: 53rpx;
				color: #010101;
				-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
				text-stroke: 1 rgba(0, 0, 0, 0);
				opacity: 1;

			}

		}

		.content {
			.friend-inquiry {
				width: 720rpx;
				border: 16rpx;
				height: 379rpx;



				.lookup {
					margin: auto;
					position: relative;
					left: 40rpx;
					top: 40rpx;
					width: 300rpx;
					height: 40rpx;
					font-size: 28rpx;
					font-weight: 500;
					line-height: 40rpx;
					color: #010101;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
					letter-spacing: 7rpx;
					opacity: 1;

				}

				.query-box {
					width: 100%;
					height: 360rpx;
					background-color: #FFFFFF;
					box-shadow: 0px 6rpx 12rpx rgba(78, 78, 78, 0.12);
					opacity: 1;
					border-radius: 14rpx;
				}
			}

			.included {

				position: relative;
				left: 184rpx;
				top: 26rpx;
				font-size: 36rpx;

				font-weight: bold;
				line-height: 50rpx;
				color: #010101;
				-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
				text-stroke: 1 rgba(0, 0, 0, 0);
				opacity: 1;

			}

			.content-data {

				margin-top: 70rpx;
				width: 722rpx;

				background: #FFFFFF;
				box-shadow: 0px 6rpx 12rpx rgba(78, 78, 78, 0.12);
				opacity: 1;
				border-radius: 14rpx;

				.content-btn-view {
					position: relative;
					bottom: 30rpx;
					left: 9rpx;


				}
			}

			.proportion {
				.proportion-sex-text {
					position: relative;
					left: 301rpx;
					top: 10rpx;
					font-size: 30rpx;

					font-weight: 400;
					line-height: 42rpx;
					color: #010101;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
					opacity: 1;

				}

				.bili-man {
					position: relative;
					left: 175rpx;
					font-size: 28rpx;

					font-weight: 400;
					line-height: 40rpx;
					color: #010101;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
				}

				.bili-woman {
					position: relative;
					left: 443rpx;
					top: -40rpx;
					font-size: 28rpx;
					font-weight: 400;
					line-height: 40rpx;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
				}

				.dividingLine {
					margin: auto;
					position: relative;
					bottom: 10rpx;
					width: 500rpx;
					height: 1rpx;
					background: #D7D7D7;
					opacity: 1;

				}

				.columns-text {
					margin: auto;
					position: relative;
					bottom: 50rpx;
					width: 120rpx;
					height: 42rpx;
					font-size: 30rpx;
					font-weight: 400;
					line-height: 42rpx;
					color: #010101;
					-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
					text-stroke: 1 rgba(0, 0, 0, 0);
					opacity: 1;

				}

				.ageDistribution {

					.age-text {

						font-size: 30rpx;
						margin-left: 40.5%;
						position: relative;
						top: 30rpx;
						font-weight: 400;
						line-height: 42rpx;
						color: #010101;
						-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
						text-stroke: 1 rgba(0, 0, 0, 0);
						opacity: 1;

					}
				}
			}
		}

		.wholeCountry {
			.whole-text {
				margin-top: 40rpx;
				position: relative;
				left: 223rpx;

				font-size: 30rpx;
				font-weight: bold;
				color: #010101;
				-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
				text-stroke: 1 rgba(0, 0, 0, 0);
				opacity: 1;
			}

			.whole-line {
				width: 293rpx;
				position: relative;
				left: 160rpx;
				top: -39rpx;
			}

			.whole-data {
				position: relative;
				left: 79rpx;
				font-size: 26rpx;

				font-weight: bold;
				line-height: 37rpx;
				color: #010101;
				-webkit-text-stroke: 1 rgba(0, 0, 0, 0);
				text-stroke: 1 rgba(0, 0, 0, 0);
				opacity: 1;


			}
		}


	}


	// 下面是饼状图配置信息
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		position: relative;
		top: 100rpx;
		display: flex;

		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}


	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		position: relative;
		margin-left: 38rpx;
		width: 750upx;
		height: 500upx;

	}

	.charts {
		width: 750upx;
		height: 500upx;
	}
</style>
